<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
  <title>汽车官网</title>
  <link href="//cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
  <!-- header -->
  <header class="header" id="header">
    <nav class="nav container">
      <a href="#" class="nav-logo">
        <i class="ri-steering-line"></i>
        Elecar
      </a>
      <div class="nav-menu" id="nav-menu">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#home" class="nav-link active-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#popular" class="nav-link">Popular</a>
          </li>
          <li class="nav-item">
            <a href="#featured" class="nav-link">Featured</a>
          </li>
        </ul>
        <div class="nav-close" id="nav-close">
          <i class="ri-close-line"></i>
        </div>
      </div>
      <!-- Toggle button -->
      <div class="nav-toggle" id="nav-toggle">
        <i class="ri-menu-line"></i>
      </div>
    </nav>
  </header>

  <!-- main -->
  <main class="main">
    <!-- home -->
    <section class="home section" id="home">
      <div class="shape shape-big"></div>
      <div class="shape shape-small"></div>
      <div class="home-container container grid">
        <div class="home-data">
          <h1 class="home-title">
            Choose The Best Car
          </h1>
          <h2 class="home-subtitle">
            Porsche Mission E
          </h2>
          <h3 class="home-elec">
            <i class="ri-flashlight-fill"></i> Electric car
          </h3>
        </div>
        <img src="./assets/img/home.png" alt="" class="home-img">

        <div class="home-car">
          <div class="home-car-data">
            <div class="home-car-icon">
              <i class="ri-temp-cold-line"></i>
            </div>
            <h2 class="home-car-number">24°</h2>
            <h3 class="home-car-name">TEMPERATURE</h3>

          </div>
          <div class="home-car-data">
            <div class="home-car-icon">
              <i class="ri-dashboard-3-line"></i>
            </div>
            <h2 class="home-car-number">873</h2>
            <h3 class="home-car-name">MILEAGE</h3>

          </div>
          <div class="home-car-data">
            <div class="home-car-icon">
              <i class="ri-flashlight-fill"></i>
            </div>
            <h2 class="home-car-number">94%</h2>
            <h3 class="home-car-name">BATTERY</h3>

          </div>
        </div>
        <a href="#" class="home-button">Start</a>
      </div>
    </section>

    <!-- about -->
    <section class="about section" id="about">
      <div class="about-container container grid">
        <div class="about-group">
          <img src="./assets/img/about.png" alt="" class="about-group">

          <div class="about-card">
            <h3 class="about-card-title">2.500+</h3>
            <p class="about-card-description">
              Supercharges placed along popular routes
            </p>
          </div>
        </div>
        <div class="about-data">
          <h2 class="section-title about-title">
            Machines With <br> Future Technology
          </h2>
          <p class="about-description">
            See the future with high-performance electric cars produced by
            renowned brands. They feature futuristic builds and designs with
            new and innovative platforms that last a long time.
          </p>
          <a href="#" class="button">Know more</a>
        </div>
      </div>
    </section>

    <!-- popular -->
    <section class="popular section" id="popular">
      <h2 class="section-title">
        Choose Your Electric Car <br> Of The Porsche Brand
      </h2>

      <div class="popular-container container swiper">
        <div class="swiper-wrapper">
          <article class="popular-card swiper-slide">
            <div class="shape shape-smaller"></div>

            <h1 class="popular-title">Porsche</h1>
            <h3 class="popular-subtitle">Turbo S</h3>

            <img src="./assets/img/popular1.png" alt="" class="popular-img">

            <div class="popular-data">
              <div class="popular-data-group">
                <i class="ri-dashboard-3-line"></i> 3.7 Sec
              </div>
              <div class="popular-data-group">
                <i class="ri-funds-box-line"></i> 356 Km/h
              </div>
              <div class="popular-data-group">
                <i class="ri-charging-pile-2-line"></i> Electric
              </div>
            </div>

            <h3 class="popular-price">$175,900</h3>

            <button class="button popular-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
          <article class="popular-card swiper-slide">
            <div class="shape shape-smaller"></div>

            <h1 class="popular-title">Porsche</h1>
            <h3 class="popular-subtitle">Taycan</h3>

            <img src="./assets/img/popular2.png" alt="" class="popular-img">

            <div class="popular-data">
              <div class="popular-data-group">
                <i class="ri-dashboard-3-line"></i> 3.7 Sec
              </div>
              <div class="popular-data-group">
                <i class="ri-funds-box-line"></i> 356 Km/h
              </div>
              <div class="popular-data-group">
                <i class="ri-charging-pile-2-line"></i> Electric
              </div>
            </div>

            <h3 class="popular-price">$114,900</h3>

            <button class="button popular-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
          <article class="popular-card swiper-slide">
            <div class="shape shape-smaller"></div>

            <h1 class="popular-title">Porsche</h1>
            <h3 class="popular-subtitle">Turbo S Cross</h3>

            <img src="./assets/img/popular3.png" alt="" class="popular-img">

            <div class="popular-data">
              <div class="popular-data-group">
                <i class="ri-dashboard-3-line"></i> 3.7 Sec
              </div>
              <div class="popular-data-group">
                <i class="ri-funds-box-line"></i> 356 Km/h
              </div>
              <div class="popular-data-group">
                <i class="ri-charging-pile-2-line"></i> Electric
              </div>
            </div>

            <h3 class="popular-price">$150,900</h3>

            <button class="button popular-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
          <article class="popular-card swiper-slide">
            <div class="shape shape-smaller"></div>

            <h1 class="popular-title">Porsche</h1>
            <h3 class="popular-subtitle">Boxster 718</h3>

            <img src="./assets/img/popular4.png" alt="" class="popular-img">

            <div class="popular-data">
              <div class="popular-data-group">
                <i class="ri-dashboard-3-line"></i> 3.7 Sec
              </div>
              <div class="popular-data-group">
                <i class="ri-funds-box-line"></i> 356 Km/h
              </div>
              <div class="popular-data-group">
                <i class="ri-charging-pile-2-line"></i> Electric
              </div>
            </div>

            <h3 class="popular-price">$125,900</h3>

            <button class="button popular-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
          <article class="popular-card swiper-slide">
            <div class="shape shape-smaller"></div>

            <h1 class="popular-title">Porsche</h1>
            <h3 class="popular-subtitle">Cayman</h3>

            <img src="./assets/img/popular5.png" alt="" class="popular-img">

            <div class="popular-data">
              <div class="popular-data-group">
                <i class="ri-dashboard-3-line"></i> 3.7 Sec
              </div>
              <div class="popular-data-group">
                <i class="ri-funds-box-line"></i> 356 Km/h
              </div>
              <div class="popular-data-group">
                <i class="ri-charging-pile-2-line"></i> Electric
              </div>
            </div>

            <h3 class="popular-price">$128,900</h3>

            <button class="button popular-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </section>

    <!-- features -->
    <section class="features section">
      <h2 class="section-title">More Features</h2>

      <div class="features-container container grid">
        <div class="features-group">
          <img src="./assets/img/features.png" alt="" class="features-img">

          <div class="features-card features-card-1">
            <h3 class="features-card-title">800v</h3>
            <p class="features-card-description">Turbo <br> Chargin</p>
          </div>

          <div class="features-card features-card-2">
            <h3 class="features-card-title">350</h3>
            <p class="features-card-description">Km <br> Range</p>
          </div>

          <div class="features-card features-card-3">
            <h3 class="features-card-title">480</h3>
            <p class="features-card-description">Km <br> Travel</p>
          </div>
        </div>
      </div>

      <img src="./assets/img/map.svg" alt="" class="features-map">
    </section>

    <!-- featured -->
    <section class="featured section" id="featured">
      <h2 class="section-title">
        Featured Luxury Cards
      </h2>
      <div class="featured-container container">
        <ul class="featured-filters">
          <li>
            <button class="featured-item active-featured" data-filter="all">
              <span>All</span>
            </button>
          </li>
          <li>
            <button class="featured-item" data-filter=".tesla">
              <img src="./assets/img/logo3.png" alt="">
            </button>
          </li>
          <li>
            <button class="featured-item" data-filter=".audi">
              <img src="./assets/img/logo2.png" alt="">
            </button>
          </li>
          <li>
            <button class="featured-item" data-filter=".porsche">
              <img src="./assets/img/logo1.png" alt="">
            </button>
          </li>
        </ul>

        <div class="featured-content grid">
          <article class="featured-card mix tesla">
            <div class="shape shape-smaller"></div>
            <h1 class="featured-title">Tesla</h1>
            <h3 class="featured-subtitle">Model X</h3>
            <img src="./assets/img/featured1.png" alt="" class="featured-img">
            <h3 class="featured-price">$98,900</h3>
            <button class="button featured-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>

          <article class="featured-card mix tesla">
            <div class="shape shape-smaller"></div>
            <h1 class="featured-title">Tesla</h1>
            <h3 class="featured-subtitle">Model 3</h3>
            <img src="./assets/img/featured2.png" alt="" class="featured-img">
            <h3 class="featured-price">$45,900</h3>
            <button class="button featured-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>

          <article class="featured-card mix audi">
            <div class="shape shape-smaller"></div>
            <h1 class="featured-title">Audi</h1>
            <h3 class="featured-subtitle">E-tron</h3>
            <img src="./assets/img/featured3.png" alt="" class="featured-img">
            <h3 class="featured-price">$175,900</h3>
            <button class="button featured-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>

          <article class="featured-card mix porsche">
            <div class="shape shape-smaller"></div>
            <h1 class="featured-title">Porsche</h1>
            <h3 class="featured-subtitle">Boxster 987</h3>
            <img src="./assets/img/featured4.png" alt="" class="featured-img">
            <h3 class="featured-price">$126,900</h3>
            <button class="button featured-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>

          <article class="featured-card mix porsche">
            <div class="shape shape-smaller"></div>
            <h1 class="featured-title">Porsche</h1>
            <h3 class="featured-subtitle">Panamera</h3>
            <img src="./assets/img/featured5.png" alt="" class="featured-img">
            <h3 class="featured-price">$126,900</h3>
            <button class="button featured-button">
              <i class="ri-shopping-bag-2-line"></i>
            </button>
          </article>
        </div>
      </div>
    </section>

    <!-- offer -->
    <section class="offer section">
      <div class="offer-container container grid">
        <img src="./assets/img/offer-bg.png" alt="" class="offer-bg">

        <div class="offer-data">
          <h2 class="section-title offer-title">
            Do You Want To Receive <br> Special Offers?
          </h2>

          <p class="offer-description">
            Be the first to receive all the information about our
            products and new cars by email by subscribing to our
            mailing list.
          </p>

          <a href="#" class="button">
            Subscribe Now
          </a>
        </div>

        <img src="./assets/img/offer.png" alt="" class="offer-img">
      </div>
    </section>

    <!-- logos -->
    <section class="logos section">
      <div class="logos-container container grid">
        <div class="logos-content">
          <img src="./assets/img/logo1.png" alt="" class="logos-img">
        </div>
        <div class="logos-content">
          <img src="./assets/img/logo2.png" alt="" class="logos-img">
        </div>
        <div class="logos-content">
          <img src="./assets/img/logo3.png" alt="" class="logos-img">
        </div>
        <div class="logos-content">
          <img src="./assets/img/logo4.png" alt="" class="logos-img">
        </div>
        <div class="logos-content">
          <img src="./assets/img/logo5.png" alt="" class="logos-img">
        </div>
        <div class="logos-content">
          <img src="./assets/img/logo6.png" alt="" class="logos-img">
        </div>
      </div>
    </section>
  </main>

  <!-- footer -->
  <footer class="footer section">
    <div class="shape shape-big"></div>
    <div class="shape shape-small"></div>

    <div class="footer-container container grid">
      <div class="footer-content">
        <a href="#" class="footer-logo">
          <i class="ri-steering-line"></i> Elecar
        </a>
        <p class="footer-description">
          We offer the best electric cars of <br>
          the most recognized brands in <br>
          the world.
        </p>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">
          Company
        </h3>

        <ul class="footer-links">
          <li><a href="#" class="footer-link">About</a></li>
          <li><a href="#" class="footer-link">Cars</a></li>
          <li><a href="#" class="footer-link">History</a></li>
          <li><a href="#" class="footer-link">Shop</a></li>
        </ul>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">
          Information
        </h3>

        <ul class="footer-links">
          <li><a href="#" class="footer-link">Request a quote</a></li>
          <li><a href="#" class="footer-link">Find a dealer</a></li>
          <li><a href="#" class="footer-link">Contact us</a></li>
          <li><a href="#" class="footer-link">Services</a></li>
        </ul>
      </div>

      <div class="footer-content">
        <h3 class="footer-title">Follow us</h3>
        <ul class="footer-social">
          <a href="//www.facebook.com/" class="footer-social-link" target="_blank">
            <i class="ri-facebook-fill"></i>
          </a>
          <a href="//www.instagram.com/" class="footer-social-link" target="_blank">
            <i class="ri-instagram-line"></i>
          </a>
          <a href="//twitter.com/" class="footer-social-link" target="_blank">
            <i class="ri-twitter-line"></i>
          </a>
        </ul>
      </div>
    </div>
    <span class="footer-copy">
      &#169; Jetwang. All rigths reserved
    </span>
  </footer>

  <!-- scroll up -->
  <a href="#" class="scroll-up" id="scroll-up">
    <i class="ri-arrow-up-line"></i>
  </a>

  <script src="./assets/js/scrollreveal.min.js"></script>
  <script src="./assets/js/swiper-bundle.min.js"></script>
  <script src="assets/js/mixitup.min.js"></script>
  <script src="./assets/js/main.js"></script>
</body>

</html>